<template>
  <van-skeleton title :row="3" style="margin-top:10px;" :loading="loading">
    <div>
      <div class="ha">
      <van-nav-bar title="个人信息" fixed="true" />
    </div>
      <div class="exam-container">
        <div class="photo" style="z-index: 99;">
          <div>
            <span class="acspan">{{ name }}</span>
          </div>
        </div>
        <div class="name">
          <van-cell-group>
            <van-cell>
              <strong class="user">{{ user.name }}</strong>
            </van-cell>
            <van-cell>
              <strong class="user">{{ user.account }}</strong>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
      <div>
        <div class="me-exam">
          <span style="font-size: 18px;padding-left:10px">订单数据</span>
        </div>
      </div>
      <div style="margin-top: 10px;">
        <van-cell-group>
          <van-cell>
            <span class="zi">已完成订单</span>
            <van-tag type="primary" size="large" class="lables">{{ data.completeOrderCount }}</van-tag>
          </van-cell>
          <van-cell>
            <span class="zi">已发货订单</span>
            <van-tag type="primary" size="large" class="lables">{{ data.sendOrderCount }}</van-tag>
          </van-cell>
          <van-cell>
            <span class="zi">未发货订单</span>
            <van-tag type="primary" size="large" class="lables">{{ data.notSendOrderCount }}</van-tag>
          </van-cell>
          <van-cell>
            <span class="zi">已取消订单</span>
            <van-tag type="primary" size="large" class="lables">{{ data.cancelOrderCount }}</van-tag>
          </van-cell>
          <van-cell>
            <span class="zi">累积总金额</span>
            <van-tag type="primary" size="large" class="lables">￥{{ data.sumMoney }}</van-tag>
          </van-cell>
        </van-cell-group>
      </div>

      <div>
        <div class="me-exams">
          <span style="font-size: 18px;padding-left:10px">商品数据</span>
        </div>
      </div>
      <div style="margin-top: 10px;">
        <van-cell-group>
          <van-cell>
            <span class="zi">购买种类</span>
            <van-tag type="primary" size="large" class="lables">{{ data.categoryCount }}种</van-tag>
          </van-cell>
          <van-cell>
            <span class="zi">购买数量</span>
            <van-tag type="primary" size="large" class="lables">{{ data.goodsCount }}件</van-tag>
          </van-cell>
        </van-cell-group>
      </div>

      <div style="margin-top: 10px;">
        <van-button block @click="loginOut" type="warning">解除绑定</van-button>
      </div>
    </div>
  </van-skeleton>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { getMerchantStatistics } from "../../api/my";
import { useRouter } from "vue-router";
import { removeToken } from "../../utils/auth";
export default defineComponent({
  setup() {
    const router = useRouter();
    const data = reactive({
      data: [],
      user: [],
      loading: true,
      name:'',
    });
    const user = localStorage.getItem("user");
    data.user = JSON.parse(user);
    const name = data.user.name;
    if (name.length > 4) {
      data.name = name.substr(0, 4);
    }else{
      data.name = name;
    }
    const events = {
      loginOut() {
        setTimeout(() => {
          sessionStorage.clear();
          removeToken();
          router.push("/login");
          localStorage.removeItem("cart")
        }, 1500);
      }
    };

    onMounted(() => {
      getMerchantStatistics().then(res => {
        if (res.result === 0) {
          data.data = res.data;
          data.loading = false;
        }
      });
    });
    return {
      ...toRefs(data),
      ...events
    };
  }
});
</script>

<style scoped>
.acspan {
  margin: auto;
  text-align: center;
  position: relative;
  top: 45px;
  left: 23px;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
}

.photo {
  background-color: #1989fa;
  width: 120px;
  height: 120px;
  border-radius: 60px;
}

.user {
  color: #000;
  float: left;
  font-size: 15px;
}

.zi {
  font-size: 17px;
  float: left;
  font-weight: bold;
  color: #000;
}

.exam-container {
  background-color: #fff;
  margin: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 10px;
  border-radius: 2px;
}

.name {
  position: relative;
  bottom: 105px;
  width: 200px;
  height: 79px;
  float: right;
  margin-top: 3px;
}

.me-exam {
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 800;
  height: 35px;
  line-height: 35px;
  background-color: #e35ca4;
  width: 120px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.me-exams {
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 800;
  height: 35px;
  line-height: 35px;
  background-color: rgb(221, 160, 221);
  width: 120px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.hr {
  width: 100%;
  border-top: 1px solid #eee;
  /* 设置顶部边框，可以调整宽度、样式和颜色 */
  height: 1rpx;
  /* 高度设置为0，使得元素看上去像一条线 */
  margin: 5px;
  /* 设置上下外边距，可以调整 */
}
</style>